<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Use of relative page sizing</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <style type="text/css">
      pre {
        font-weight: bold;
        color: #00008B;
        background-color: #D3D3D3;
      }
    </style>    
  </head>
  <body>
    <h2>Use of relative page sizing</h2>
    <p>
      I used relative page sizing, as much as I could, to give the page some flexibility depending on the user's monitor or browser window size. I assumed that most computer users today have a screen resolution of at least 800x600. I gave the index page a minimum width of 800 pixels and set the margins to center the page automatically on the visitors screen.
    </p>
    <p>
      I used the following CSS guidelines internally for the home page's layouts. Notice that the only fixed sizes are the <span style="font-style: italic;">entire-page</span> (a div container for everything within the body element) and the <span style="font-style: italic;">nav-bar</span> (a div containing the navigational links).  The rest of the sizes, margins, and padding use percentages to determine the page dimensions.
    </p>
    <pre>
      &lt;style type="text/css"&gt;
        body { 
          margin: 0;
          padding: 0;
          text-align: center;
        }
        #entire-page {
          position: relative;
          margin-left: auto;
          margin-right: auto;
          width: 70%;
          min-width: 800px;
          text-align: left;
        }
        #page-heading {
          float: left;
          width: 100%;
        }
        #page-heading h1 {
          padding-left: 10%;
        }
        #nav-main-container {
          float: left;
          width: 100%;
        }
        #nav-bar {
          float: left;
          margin: 0;
          min-height: 300px;
          height: 100%;
          width: 20%;
        }
        #nav-bar h3 {
          text-align: center;
        }
        #main-content {
          float: right;
          padding: 0 5%;
          width: 70%;
        }
        #email {
          float: left;
          padding-left: 5%;
          text-align: left;
        }
        #validation {
          float: right;
          padding-right: 10%;
          text-align: right;
        }
      &lt;/style&gt;
    </pre>
    <p>
      <a href="http://validator.w3.org/check?uri=referer">
        <img src="http://www.w3.org/Icons/valid-xhtml10"
             alt="Valid XHTML 1.0 Strict" height="31" width="88"/>
      </a>
    </p>
  </body>
</html>
